<template>
  <div 
    :class="[
      'axiom-divider',
      `axiom-divider--${direction}`,
      `axiom-divider--${contentPosition}`,
      { 'axiom-divider--with-text': hasContent }
    ]"
  >
    <span v-if="hasContent" class="axiom-divider__text">
      <slot>{{ content }}</slot>
    </span>
  </div>
</template>

<script>
import { computed, useSlots } from 'vue'
// import { GlobalUtilsMixin } from '@/utils/globalUtils'

export default {
  name: 'AxiomDivider',
  // mixins: [GlobalUtilsMixin],
  props: {
    // 分割线方向
    direction: {
      type: String,
      default: 'horizontal',
      validator: (value) => ['horizontal', 'vertical'].includes(value)
    },
    // 文本内容
    content: {
      type: String,
      default: ''
    },
    // 文本位置
    contentPosition: {
      type: String,
      default: 'center',
      validator: (value) => ['left', 'center', 'right'].includes(value)
    }
  },
  computed: {
    hasContent() {
      // 在Options API中，插槽通过 this.$slots 访问
      return this.content || this.$slots.default
    }
  },
  created() {
    // this.$logger.debug('CDivider 组件初始化')
  }
}
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-divider';
</style>